<template>
	<view>
		<view  style="height: 200rpx; background-color: indianred; ">
			<u-row>
				<u-col span="8">
					<view  >
						<u--text :bold="false" 
						customStyle="margin: 25rpx 0rpx 0rpx 50rpx" 
						color="#fff" :text="'钱包余额: ￥'+this.balanceMoney"></u--text>
						
						<u--text :bold="false"
						customStyle="margin: 10rpx 0rpx 0rpx 50rpx" 
						color="#fff" :text="'提现中: ￥'+this.tixianIngMoney"></u--text>
						<u--text :bold="false"
						customStyle="margin: 10rpx 0rpx 0rpx 50rpx" 
						color="#fff" :text="'已提现: ￥'+this.tixianEndMoney"></u--text>
					</view>
				</u-col>
				<u-col span="4">
					<view  style=" display: flex; 
					 align-items: center; ">
						<u-button @click="btnClick()" style="width: 150rpx; height: 50rpx; margin-top: 30rpx;" type="error" :plain="true" text="提现"></u-button>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-tabs :list="tabList" @click="click"></u-tabs>
		<u-row>
			<u-col span="2">
<!-- 				<view class="custom-style-parent">
					
				</view> -->
				<u--text :bold="false" customStyle="margin: 20rpx 0rpx 0rpx 50rpx" color="#666" text="金额"></u--text>
			</u-col>
			<u-col span="7">
				<u--text :bold="false" customStyle="margin: 20rpx 0rpx 0rpx 100rpx" color="#666" text="申请时间"></u--text>
			</u-col>
			<u-col span="3">
				<u--text :bold="false" customStyle="margin: 20rpx 0rpx 0rpx 50rpx" color="#666" text="状态"></u--text>
			</u-col>
		</u-row>


		<u-list customStyle="margin: 30rpx 0rpx 0rpx 0" @scrolltolower="scrolltolower">
			<u-list-item v-for="(item, index) in indexList" :key="index">
				<u-row>
					<u-col span="2">
						<view class="custom-style-parent">
							<u--text  customStyle="margin: 0rpx 0rpx 20rpx 30rpx" :bold="true" color="#000" :text="'￥'+item.price"></u--text>
						</view>
					</u-col>
					<u-col span="7">
						<view style="display: flex; flex-direction: row;">
							<u--text customStyle="margin: 0rpx 0rpx 20rpx 100rpx" color="#333" :text="item.auditTime"></u--text>
						</view>
					</u-col>
					<u-col span="3">
						<view class="custom-style-parent">
							<u--text  customStyle="margin: 0rpx 0rpx 20rpx 00rpx" color="red" :text="getStatus(item.auditStatus)"></u--text>
						</view>
					</u-col>
				</u-row>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [
					'/static/bg_rank.png',
				],
				tabIndex:1,
				tabAddOrSub:'+',
				indexList: [],
				balanceMoney:0,
				tixianIngMoney:0,
				tixianEndMoney:0,
				status:0,
				tabList: [{
					name: '提现中',
				}, {
					name: '已提现',
				}],
			}
		},
		onLoad(options) {
			if(options.recordType != undefined &&options.recordType != ''){
				this.balanceMoney = options.recordType
			}
	
			this.loadmore()
		},
		methods: {
			btnClick() {
				if(this.balanceMoney <= 0){
					this.$u.toast("余额不足!")
					return
				}
				this.$u.route('pages/mine/with_draw');
			},
			click(item) {
				console.log('item', item);
				if(item.index == 1){
					this.status = 1;
				}else {
					this.status = 0;
				}
				
				this.loadmore()
			},
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				let param = {
					pageNum: 1,
					pageSize: 200,
					auditStatus: this.status,
				}
				this.$u.api.apiWithDrawHis(param).then(res => {
					if (res.code == 1) {
						console.log("apiHotRank",res.data)
						this.indexList = res.data.list.list
						this.balanceMoney = res.data.income
						this.tixianIngMoney = res.data.tixianimg
						this.tixianEndMoney = res.data.tixianed
					}
				})
			},
			getMoney(moeny){
				if(this.tabIndex == 1){
					return '+'+moeny
				}else {
					return '-'+moeny
				}
			}
			,
			getStatus(status){
				if(status == 0){
					return "提现中"
				}
				return "已提现"
			}
		}
	}
</script>

<style>
	.custom-style-parent {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
